<template>
  <div class="home">
    <div class="banner-info">
      <el-carousel height="600px">
        <el-carousel-item v-for="banner in bannerList" :key="banner.id">
          <el-button
            class="banner-button"
            size="large"
            type="primary"
            round
            @click="handleJumpPath(banner.url)"
            v-if="!banner.whetherViewDetails"
          >
            查看详情
          </el-button>
          <el-button
            class="banner-button"
            style="margin-left: 8%"
            size="large"
            type="primary"
            round
            @click="goUrl(banner.experienceUrl)"
            v-if="!banner.whetherNowExperience"
          >
            立即体验
          </el-button>
          <img
            src="@/assets/img/bignew.png"
            alt=""
            style="top: 20%; left: 42%; position: fixed"
            v-if="!banner.whetherNew"
          />
          <img :src="banner.picture" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="card-info product">
      <div class="card-title">提供高效、专业的测评服务</div>
      <div class="product-content">
        <div class="product-card" v-for="card in cardList" :key="card.id">
          <div class="product-head">
            <span>{{ card.name }} </span>
            <el-button
              color="#3565D6"
              type="primary"
              :icon="Right"
              circle
              @click="handleJumpPath(card.url)"
            />
          </div>
          <div class="product-body">
            <img :src="card.picture" alt="" style="width: 150px" />
            <span style="font-size: 14px; color: #666d7c">{{ card.info }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card-info solution">
      <div class="card-title">提供面向各个行业优质成熟的解决方案</div>
      <div class="solution-content">
        <div class="solution-menu">
          <el-menu
            active-text-color="#3565D6"
            background-color="#324057"
            class="el-menu-vertical-demo"
            :default-active="0"
            text-color="#fff"
            @select="handleSelect"
          >
            <el-menu-item
              v-for="menu in solutionMenu"
              :index="menu.id"
              :key="menu.id"
            >
              <span>{{ menu.name }}</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="solution-middle">
          <div class="title">{{ solution.name }}</div>
          <div class="content">
            {{ solution.info }}
          </div>
          <div class="button">
            <el-button @click="handleJumpPath(solution.url)"
              >查看更多</el-button
            >
          </div>
        </div>
        <img :src="solution.picture" alt="" style="padding: 2%" />
      </div>
    </div>
    <div class="card-info authentication">
      <div class="card-title">荣获各项专业资质认证，安全稳定可信赖</div>
      <div class="authentication-content">
        <div
          class="authentication-card"
          v-for="(item, index) in authenticationList"
          :key="index"
        >
          <img :src="item.url" alt="" style="width: 250px; margin-bottom: 2%" />
          <span style="font-size: 18px">{{ item.code }}</span>
          <span style="font-size: 18px; text-align: center">{{
            item.info
          }}</span>
        </div>
      </div>
    </div>
    <div class="card-info case">
      <div class="card-title">各行业客户案例</div>
      <div style="padding-top: 5%; text-align: center">
        <img
          src="@/assets/img/case.png"
          alt=""
          style="width: 80%"
          @click="handleJumpPath('/case')"
        />
        <!-- <el-carousel height="500px">
          <el-carousel-item >
            <div class="section-content">
              <img src="@/assets/img/case.png" alt="" style="width: 100%;"/>
              <h2 class="sub-title">{{ item.title }}</h2>
              <p class="sub-desc">{{ item.content }}</p>
            </div>
          </el-carousel-item>
        </el-carousel> -->
      </div>
    </div>
    <div class="card-info call">
      <div class="call-box">
        <div class="text">
          <h2 class="title" style="color: #367ff6; font-weight: 800">
            现在开始，
          </h2>
          <h3 class="title">与我们共同打造高品质产品</h3>
        </div>
        <div class="form">
          <div style="display: flex">
            <img
              src="https://cdn.wetest.qq.com/wetest-web-qq/img/87745983.webp"
              width="40"
              height="40"
              style="padding-right: 2%"
            />
            <span style="color: #04060b; font-size: 26px">联系我们</span>
          </div>
          <el-form
            ref="formRef"
            :model="formData"
            label-width="auto"
            :rules="formRules"
            size="large"
            label-position="top"
            style="margin-top: 5%"
          >
            <el-form-item label="企业名称" prop="companyName">
              <el-input v-model="formData.companyName" />
            </el-form-item>
            <el-form-item label="称呼" prop="contactName">
              <el-input v-model="formData.contactName" />
            </el-form-item>
            <el-form-item label="手机号" prop="contactPhone">
              <el-input v-model="formData.contactPhone" />
            </el-form-item>
            <el-form-item label="意向服务" prop="intendedService">
              <el-input v-model="formData.intendedService" />
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input type="textarea" v-model="formData.remarks" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="callSubmit(formRef)"
                >立即提交</el-button
              >
              <span style="margin-left: 5%">我们将在1个工作日内联系您</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="footer-info">
      <span style="text-align: center; color: #fff6">
        <a @click="goUrl('https://geovisearth.com/declaration#/secret')">
          协议与声明
        </a>
        | © 中科星图 版权所有
        由中科数测(无锡)科技有限公司与中科星图数字地球合肥有限公司联合运营
        皖ICP备2022003461号-1 |
        <a @click="goUrl('https://beian.mps.gov.cn/#/query/webSearch')">
          皖公网安备34019202001857号
        </a>
        | 甲测资字11111577
      </span>
      <a
        style="position: absolute; right: 14%; font-size: 14px"
        @click="
          goUrl('https://www.yuque.com/zhaozhe-igbt8/uead03/uxdn43170c1z19b2')
        "
        >隐私政策</a
      >
      <a
        style="position: absolute; right: 10%; font-size: 14px"
        @click="
          goUrl('https://www.yuque.com/zhaozhe-igbt8/uead03/gtc2vu34grho6u16')
        "
        >用户协议
      </a>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Right } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { service } from "@/config/service";
const router = useRouter();

const bannerList = ref([]);
const cardList = ref([]);
const solutionMenu = ref([]);
const solution = ref({
  id: 0,
  name: "",
  info: "",
  url: "",
  pictrue: "",
});
const solutionList = ref();
const authenticationList = ref([
  {
    url: require("@/assets/img/auth1.jpg"),
    code: "CNAS",
    info: "中国合格评定国家认可委员会实验室认可证书",
  },
  {
    url: require("@/assets/img/auth2.jpg"),
    code: "ISO/IEC 27001:2013",
    info: "信息安全管理体系认证",
  },
  {
    url: require("@/assets/img/中科数测-CCRC信息安全风险评估_00.png"),
    code: "CCRC-2024-ISV-RA-2487",
    info: "CCRC信息安全服务资质",
  },
  {
    url: require("@/assets/img/auth4.jpg"),
    code: "能力成熟度模型集成",
    info: "CMMI 3级认证",
  },
]);
const formData = ref({
  companyName: "",
  contactName: "",
  contactPhone: "",
  intendedService: "",
  remarks: "",
});
const formRef = ref(); // 表单 Ref
const formRules = reactive({
  companyName: [
    {
      required: true,
      pattern: "[^ \x20]+",
      message: "企业名称不能为空",
      trigger: "blur",
    },
  ],
  contactName: [
    {
      required: true,
      pattern: "[^ \x20]+",
      message: "称呼不能为空",
      trigger: "blur",
    },
  ],
  contactPhone: [
    { required: true, message: "手机号不能为空", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur" },
  ],
});
const handleSelect = (key) => {
  solutionList.value.forEach((item) => {
    if (key === item.id) {
      solution.value = item;
    }
  });
};

const handleJumpPath = (path) => {
  router.push(path);
};

const goUrl = (url) => {
  window.open(url);
};

const callSubmit = async (formRef) => {
  // 校验表单
  if (!formRef) return;
  await formRef.validate(async (valid, fields) => {
    if (valid) {
      await service.post(
        "https://geotest.geovisearth.com/zksc-api/test/service-consultation/create",
        formData.value
      );
      formData.value = {
        companyName: "",
        contactName: "",
        contactPhone: "",
        intendedService: "",
        remarks: "",
      };
      ElMessage({
        message: "我们将在1个工作日内联系您",
        type: "success",
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

onMounted(async () => {
  let banner = await service.get("/solutionManage/getBannerAddresses");
  if (banner.data.length) {
    banner.data.forEach((item) => {
      item.picture = JSON.parse(item.picture)[0].url;
    });
    bannerList.value = banner.data;
  }
  let services = await service.get("/solutionManage/getServiceAddresses");
  if (services.data.length) {
    services.data.forEach((item) => {
      item.picture = JSON.parse(item.picture)[0].url;
    });
    cardList.value = services.data;
  }
  let solutions = await service.get("/solutionManage/getSolutionAddresses");
  if (solutions.data.length) {
    solutions.data.forEach((item) => {
      item.picture = JSON.parse(item.picture)[0].url;
    });
    solutionList.value = solutions.data;
    solutionMenu.value = solutions.data;
    solution.value = solutions.data[0];
  }
});
</script>

<style lang="scss" scope>
.home {
  margin-top: 60px;

  .banner-info {
    width: 100%;
    // background-color: #e2e9f8;

    .banner-button {
      top: 75%;
      left: 13%;
      position: fixed;
      width: 7%;
    }
  }

  .card-info {
    height: 100vh;
    width: 80%;
    padding: 0 10%;
    background: #f7f7f7;

    .card-title {
      letter-spacing: 6px;
      font-size: 36px;
      text-align: center;
      color: #282936;
      padding-top: 4%;
    }
  }

  .product {
    .product-content {
      display: grid;
      grid-template-columns: auto auto auto;
      grid-column-gap: 20px;
      justify-items: center;
      margin: 0 auto;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      padding-top: 5%;

      .product-card {
        padding: 25px 40px 10px;
        width: 380px;
        height: 260px;
        margin-bottom: 100px;
        transition: all 0.3s;
        background: #fff;
        border-radius: 20px;
        cursor: pointer;

        .product-head {
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 10px;
          color: #282936;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }

        .product-body {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }

      .product-card:hover {
        box-shadow: -6px -6px 11px #fff, 6px 6px 11px rgba(0, 0, 0, 19%);
      }
    }

    .product-more {
      float: right;
      margin-right: 7%;

      button {
        position: relative;
        display: inline-block;
        cursor: pointer;
        outline: none;
        border: 0;
        vertical-align: middle;
        text-decoration: none;
        background: transparent;
        padding: 0;
        font-size: inherit;
        font-family: inherit;
      }

      button.learn-more {
        width: 12rem;
        height: auto;
      }

      button.learn-more .circle {
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        position: relative;
        display: block;
        margin: 0;
        width: 3rem;
        height: 3rem;
        background: #3565d6;
        border-radius: 1.625rem;
      }

      button.learn-more .circle .icon {
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        background: #fff;
      }

      button.learn-more .circle .icon.arrow {
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        left: 0.625rem;
        width: 1.125rem;
        height: 0.125rem;
        background: none;
      }

      button.learn-more .circle .icon.arrow::before {
        position: absolute;
        content: "";
        top: -0.29rem;
        right: 0.0625rem;
        width: 0.625rem;
        height: 0.625rem;
        border-top: 0.125rem solid #fff;
        border-right: 0.125rem solid #fff;
        transform: rotate(45deg);
      }

      button.learn-more .button-text {
        transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.75rem 0;
        margin: 0 0 0 1.85rem;
        color: #282936;
        font-weight: 700;
        line-height: 1.6;
        text-align: center;
        text-transform: uppercase;
      }

      button:hover .circle {
        width: 100%;
      }

      button:hover .circle .icon.arrow {
        background: #fff;
        transform: translate(1rem, 0);
      }

      button:hover .button-text {
        color: #fff;
      }
    }
  }

  .solution {
    background-color: #fff;
    height: 65vh;

    .solution-content {
      width: 80%;
      height: 70%;
      margin: 3% 10% 3% 10%;
      border: 1px solid rgba(220, 223, 230, 1);
      display: flex;

      .solution-menu {
        width: 20%;
        height: 100%;
        background-color: #324057;

        ul {
          height: 100%;

          li {
            height: 20%;
            list-style: none;
          }
        }
      }

      .solution-middle {
        width: 50%;
        padding: 5% 5% 10% 5%;

        .title {
          font-weight: 400;
          font-size: 20px;
          margin-bottom: 3%;
        }

        .content {
          font-size: 16px;
          color: #606266;
          line-height: 25px;
        }

        .button {
          margin-top: 15%;
        }
      }
    }
  }

  .authentication {
    height: 75vh;

    .authentication-content {
      display: grid;
      grid-template-columns: auto auto auto auto;
      grid-column-gap: 10%;
      justify-items: center;
      width: -moz-fit-content;
      width: fit-content;
      padding-top: 5%;
      padding-left: 10%;
    }

    .authentication-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5%;
      border: 1px solid rgba(220, 223, 230, 1);
    }
  }

  .case {
    background-color: #fff;
    height: 90vh;

    .section-content {
      padding: 10%;
      width: 60%;
      height: 50%;
      margin: 0 auto;
      box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.1);

      .sub-title {
        color: #000;
        font-size: 22px;
        font-weight: 500;
        margin: 30px 0 10px;
        text-align: center;
      }

      .sub-desc {
        color: #666;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 30px;
        white-space: pre-line;
      }
    }
  }

  .call {
    height: 40vh;
    background-image: url("../assets/img/callback.jpg");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 60px;
    margin-top: 226px;
    width: 80%;

    .call-box {
      margin: 0 auto;
      padding: 0 16px;
      height: 100%;
      width: 80%;
      display: flex;

      .text {
        padding: 10% 0;

        .title {
          color: #04060b;
          font-size: 36px;
          font-weight: 400;
          margin-bottom: 6px;
        }
      }

      .form {
        position: relative;
        box-sizing: border-box;
        display: block;
        width: 50%;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 12px 24px 6px rgba(31, 38, 43, 0.1);
        padding: 30px;
        position: relative;
        z-index: 3;
        margin-left: 25%;
        margin-top: -10%;
        height: 170%;
      }
    }
  }

  .footer-info {
    height: 10vh;
    width: 100%;
    background-color: #324057;
    margin-top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 12px;

    a {
      color: #fff;
      cursor: pointer;
    }

    a,
    a:active,
    a:focus,
    a:hover {
      outline: 0;
      text-decoration: none;
    }
  }
}
</style>

<style lang="scss" scoped>
.home {
  .el-menu-item.is-active {
    background-color: rgba(43, 43, 43, 1);
    font-size: 0.8vw;
  }

  .el-menu-item {
    justify-content: center;
    font-size: 0.8vw;
  }

  .el-form-item__label {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .el-carousel__item {
    display: flex;
    justify-content: center;
  }
}
</style>
